<template>
  <c-with-dialog
    ref="dialog"
    v-model="selections"
    multiple
    method="POST"
    :columns="columns"
    url="/api/v1/configStyle/page"
    :filters-raw="filtersRaw"
    title="新增专区"
    :open-fun="openFun"
  >
    <template #btn>
      <c-button @click="cancelHandle">取消</c-button>
      <c-button type="primary" @click="confirmHandle">确认</c-button>
    </template>
  </c-with-dialog>
</template>
<script>
import { otherFiltersItem } from '@/utils'
export default {
  name: 'AddStyle',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns: [
        {
          prop: 'styleCode',
          label: '专区编码'
        },
        {
          prop: 'styleName',
          label: '专区名称'
        }
      ],
      selections: []
    }
  },
  computed: {
    filtersRaw() {
      const t = this.selData[0]
      if (!t) return
      return [
        otherFiltersItem('enable', '1', '='),
        ...(t._groupSpace || []).map(e => e.styleCode).filter(e => !!e).map(e => otherFiltersItem('styleCode', e, '<>'))
      ]
    }
  },
  watch: {
    selData(v) {
      this.$nextTick(() => {
        if (this.$refs.cTableBox) {
          this.$refs.cTableBox.initTableData()
        }
      })
    }
  },
  methods: {
    openFun() {
      if (!this.singleJudge(this.selData, '空间', true)) {
        return false
      }
      if (!this.selData[0].spaceCode) {
        this.$message.warning('请先选择空间数据')
        return false
      }
      return true
    },
    selectionChange(v) {
      this.selections = v
    },
    confirmHandle() {
      this.$emit('on-change', this.selections, this.selData[0])
      this.$refs.dialog.visible = false
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    }
  }
}
</script>
